<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Title</title>
  <link href='https://api.mapbox.com/mapbox-gl-js/v1.12.0/mapbox-gl.css' rel='stylesheet' />
  <style>
      html,
      body,
      #app,
      #map {
          width: 100%;
          height: 100%;
          margin: 0;
          padding: 0;
          overflow: hidden;
          font-size: 12px;
      }
       ul, li {
           list-style: none;
       }
      .legend {
          position: absolute;
          bottom: 20px;
          left: 20px;
          padding: 10px;
          background-color: white;
          z-index: 9;
      }
      .typhoon-list {
          position: absolute;
          top: 20px;
          right: 20px;
          padding: 10px;
          background-color: white;
          z-index: 9;
      }
      li {
          line-height: 20px;
      }
      li.title {
          font-weight: bold;
      }
      li span.point {
          width: 10px;
          height: 10px;
          border-radius: 100%;
          display: inline-block;
          margin-left: 6px;
          margin-right: 6px;
      }
      li span.line {
          width: 15px;
          height: 0;
          border-bottom: 3px dashed white;
          display: inline-block;
          margin-right: 6px;
      }

      .my-popup .mapboxgl-popup-content {
          background-color: white;
          margin: 0;
          padding: 0 8px 8px 8px;
          white-space: nowrap;
          font-size: 12px; }
      .my-popup .mapboxgl-popup-content h5 {
          margin: 0 0 3px 0;
          padding: 3px 0;
          font-size: 14px; }
      .my-popup .mapboxgl-popup-content label {
          display: inline-block;
          text-align: right;
          width: 65px; }
      .my-popup .mapboxgl-popup-tip {
          border-top-color: white !important; }
      .my-popup .mapboxgl-popup-close-button {
          color: white; }
      .typhoon-label {
          background-color: rgba(255, 255, 255, 0.65);
          border-radius: 5px;
          padding: 2px 5px;
          font-size: 12px;
          color: black; }
      .typhoon-label:after {
          top: 6px;
          border: solid transparent;
          content: " ";
          height: 0;
          width: 0;
          position: absolute;
          pointer-events: none; }
      .typhoon-label:after {
          border-right-color: rgba(255, 255, 255, 0.65);
          border-width: 5px;
          left: -10px; }
      @keyframes rotate {
          0% {
              transform: rotate(0deg); }
          100% {
              transform: rotate(360deg); } }
      .typhoon-image {
          overflow: hidden;
          display: none; }

      .typhoon-icon {
          width: 50px;
          height: 50px;
          background: url("data/typhoon.png");
          animation: rotate 1s linear infinite; }
  </style>
</head>
<body>
<div id="app">
  <div id="map"></div>
  <ul class="legend">
    <li class="title">台风强度</li>
    <li v-for="(val, key) in legendData.colorDict" :key="key">
      <span class="point" :style="{backgroundColor: val}"></span> {{key}}
    </li>
    <li class="title">预报机构</li>
    <li v-for="(val, key) in legendData.lineColorDict" :key="key">
      <span class="line" :style="{borderBottomColor: val}"></span> {{key}}
    </li>
  </ul>

  <ul class="typhoon-list">
    <li class="title">台风列表</li>
    <li v-for="(item, index) in typhoonList" :key="index">
      <input type="checkbox" :value="item.tfbh" @click="clickEvt">
      {{ item.tfbh }} {{ item.name }}
    </li>
  </ul>
</div>
<script src='https://api.mapbox.com/mapbox-gl-js/v1.12.0/mapbox-gl.js'></script>
<script src="https://cdn.jsdelivr.net/npm/vue"></script>
<script src="http://libs.baidu.com/jquery/2.0.0/jquery.min.js"></script>
<script src="./js/proj4.js"></script>
<script src="./js/typhoon.js"></script>
<script>
    const app = new Vue({
        el: '#app',
        data() {
            return {
                typhoon: null,
                typhoonList: [],
                legendData: {
                    colorDict: {
                        '热带低压(TD)': '#20f634',
                        '热带风暴(TS)': '#2078fd',
                        '强热带风暴(STS)': '#eaf232',
                        '台风(TY)': '#eab434',
                        '强台风(STY)': '#e085f7',
                        '超强台风(Super TY)': '#ea2a34'
                    },
                    lineColorDict: {
                        '中国': '#ec5d72',
                        '中国香港': '#ec7cfe',
                        '中国台湾': '#ecaa65',
                        '日本': '#56f66e',
                        '美国': '#53dbfe',
                        '韩国': '#72a4ac',
                        '欧洲': '#4c54a6'
                    }
                }
            }
        },
        mounted() {
            this.init()
        },
        methods: {
            init() {
                const that = this
                const libPath = 'http://localhost:8081/mapbox/'
                const style = {
                    "version": 8,
                    "name": "lzugis",
                    "sprite": libPath + "bank",
                    "glyphs": libPath + "fonts/mapbox/{fontstack}/{range}.pbf",
                    "sources": {
                        "nav": {
                            "type": "raster",
                            "tiles": ['https://webst01.is.autonavi.com/appmaptile?style=6&x={x}&y={y}&z={z}'],
                            "tileSize": 256
                        }
                    },
                    "layers": [{
                        "id": "nav",
                        "type": "raster",
                        "source": "nav",
                        "minzoom": 0,
                        "maxzoom": 17
                    }]
                }
                const dom = document.getElementById('map');
                window.map = new mapboxgl.Map({
                    container: dom,
                    style: style,
                    center: [103.081163, 37.1612],
                    zoom: 3.5,
                    minZoom: 2,
                    maxZoom: 18
                });

                that.getTyphoonList()

                window.map.on('load', () => {
                    that.typhoon = new Typhoon(map);
                })
            },
            getTyphoonList() {
                const that = this
                $.get('data/typhoon-list.json', res => {
                    that.typhoonList = res
                })
            },
            clickEvt(evt) {
                const tfbh = evt.target.value;
                const checked = evt.target.checked;
                checked ? this.typhoon.showTyphoon(tfbh) : this.typhoon.hideTyphoon(tfbh)
            }
        }
    })
</script>
</body>
</html>